$(function() {
    //因为在删除编辑中的每次都需要用到动态渲染页面的方法，所以这里可以考虑利用封装这个函数，方便后面调用
    function init() {
        $.ajax({
            //获取到列表信息
            url: bignew.user_list, //请求地址
            type: 'get', //请求方式
            dataType: 'json', //响应体格式
            success: function(res) { //返回响应体
                console.log(res);
                $('tbody').html(template('artlist', res)) //给tbody进行渲染
            }
        });
    }
    init() //进入页面需要进行第一次渲染，所以这里需要先调用一次
        // 以为编辑和新增的代码其实是差不多一样的，所以这里可以采用封装代码的方法 和判断方式来做
    $('.btn-primary').on('click', function() {
            //模态框的btn-primary的文本为新增的时候，
            if ($(this).text() === '新增') {
                //先获取到name，slug这两个里面的value值
                const name = $('#name').val();
                const slug = $('#slug').val();
                // 然后再调用函数的方法
                //第一个传入的参数为请求地址，第二个为请求参数，第三个为操作类型字符串
                opt(bignew.user_add, { name, slug }, '新增')

                //假如模态框的btn-primary的文本为编辑的时候
            } else if ($(this).text() == '编辑') {
                //先获取到name 、slug、id的值，就是我们要获取到的请求参数
                const name = $('#name').val();
                const slug = $('#slug').val();
                const id = $('#id').val()
                    //调用函数，传入的参数第一个代表请求地址，第二个是请求参数，第三个是操作类型字符串
                opt(bignew.user_category_edit, { name, slug, id }, '编辑')
            }
        })
        //封装新增或者编辑的函数，
        // 为什么会采用这样的方法呢，主要是因为新增或者编辑里面的代码基本相同，大同小异，利用封装可以减少代码量，简洁代码
        //第一个形参，请求地址，
        //第二个形参，请求参数
        //第三个形参，操作类型字符串
    function opt(url, data, msg) {
        $.ajax({
            type: 'post', //请求方式都是post
            url: url, //请求地址
            data: data, //请求参数
            success: function(res) { //返回响应体
                console.log(res);
                if (res.code === 201 || res.code == 200) { //当res.code返回的是200或者201的时候，提示用户操作成功
                    alert(msg + '操作成功');
                    $('#myModal').modal('hide') //当点下去的时候应该隐藏模态框
                    init() //并且重新渲染页面
                }
            },
            error: function(err) { //这里需要做一个错误提示
                console.log(err);
                if (err.responseJSON.code === 400) { //当响应体返回的是状态码为400的时候
                    alert(err.responseJSON.msg) //应该返回响应体提示用户
                }
            }
        })

    }
    //当响应体调用方法的时候，应该让input框里面的值都为空
    $('#myModal').on('hidden.bs.modal', function(e) {
            $('#name').val('');
            $('#slug').val('');
        })
        //当点击新增分类这个按钮，做出改变文本值的操作
    $('#xinzengfenlei').on('click', function() {
            $('.btneditd').text('新增') //让btneditd的文本值为新增
            $('.modal-title').text('新增分类') //并且让模态框的标头文本值为新增分类
        })
        //给btnedit编辑按钮添加点击事件，因为这个是一个动态生成的按钮，所以这里需要采用事件委托的方式来做
    $('tbody').on('click', '.btnedit', function() {
            console.log($(this).data()); //获取到这个按钮里面的data值
            $('#name').val($(this).data('name')) //再将这个得到的data值赋值到name上去
            $('#slug').val($(this).data('slug')) //再将这个得到的data值赋值到slug上去
            $('#id').val($(this).data('id')) //再将这个得到的id值赋值到slug上去
            $('#myModal').modal('show') //点击这按钮的时候，需要让模态框出现
            $('.btneditd').text('编辑') //并且让btneditd的文本变成编辑文本
            $('.modal-title').text('编辑分类') //并且让模态框的标头文本值变成编辑分类
        })
        //给删除按钮设置点击事件，同上，因为这个删除按钮也是动态得到的，所以点击事件也是需要用委托事件的方法来做
    $('tbody').on('click', '.btndel', function() {
        //这里需要先得到这个按钮所在行的id值
        let id = $(this).data('id')
        console.log(id);
        //这里可以先做一个非常友好的操作，显示提示用户真的需要删除，防止误删
        if (confirm('真的不要我了吗')) {
            //假如真的要删除的时候，发起ajax请求
            $.ajax({
                type: 'post', //请求方式
                url: bignew.user_delete, //请求地址
                data: { id }, //请求参数
                success: function(res) { //返回响应体
                    console.log(res);
                    if (res.code === 204) { //假如响应体返回的是204 ，那么就说明已经是已经删除
                        alert(res.msg) //告诉客户可以删除
                        init() //因为删除，页面需要重新刷新，所以这里需要重新调用函数来进行页面渲染
                    }
                }
            })
        }
    })
})